<!--账号列表-->
<template>
  <div class="app-container">
    <div class="search">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="true" label-width="68px">
      <el-input
        class="search-input"
        v-model="queryParams.key"
        placeholder="输入玩家ID或者玩家名"
      ></el-input>

      <el-button type="primary" icon="el-icon-search" size="mini" @click="searchPlayerList" style="margin-left: 20px;">筛选</el-button>
      <el-button type="primary" size="mini" @click="getPlayerList">重置</el-button>
      </el-form>
    </div>
    <el-table v-loading="loading" :data="tableData">
      <el-table-column
        label="玩家ID"
        align="center"
        prop="playerId"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="玩家昵称"
        align="center"
        prop="nickname"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="玩家备注名"
        align="center"
        prop="remarkName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="余额"
        align="center"
        prop="balance"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="goPlayerInfo(scope.row)"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getPlayerList"
    />
  </div>
</template>
<script>
import { getPlayerList, searchPlayerList } from "@/api/account/player.js";

export default {
  data() {
    return {
      queryParams: {
        key: "",
        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
      tableData: [],
      total: 0,
    };
  },
  mounted() {
    this.getPlayerList();
  },
  methods: {
    // 获取玩家列表
    getPlayerList() {
      this.loading = true;
      getPlayerList(this.queryParams).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },

    searchPlayerList() {
      this.loading = true;
      searchPlayerList(this.queryParams).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
        this.loading = false;
      }).catch((error) => {
        // 处理接口异常
        console.error("searchPlayerList error:", error);
        this.loading = false;
      });
    },

    // 跳转玩家详情
    goPlayerInfo(row) {
      this.$router.push({
        path: "/player/detail",
        query: { id: row.playerId },
      });
    },

  },
};
</script>
<style lang="scss" scoped>
.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  .search-input {
    width: 240px;
  }
}
</style>
